<template>
	<div class="setting">
		<template v-if="tabType == 'data'">
			<div class="card">
				<div class="title">左侧按钮</div>
				<div class="content">
					<el-form-item label="标题">
						<dc-text-color v-model="settingData.data.btn1.title" placeholder="请输入标题" maxlength="5"
							show-word-limit></dc-text-color>
					</el-form-item>
					<template v-if="settingData.data.btn1.isMp == 1">
						<el-form-item label="小程序路径">
							<el-input v-model="settingData.data.btn1.path" placeholder="请输入小程序路径"></el-input>
						</el-form-item>
						<el-form-item label="小程序appid">
							<el-input v-model="settingData.data.btn1.appid" placeholder="请输入小程序appid"></el-input>
						</el-form-item>
						<el-form-item label="小程序原始ID">
							<el-input v-model="settingData.data.btn1.id" placeholder="请输入小程序原始ID"></el-input>
						</el-form-item>
					</template>
					<el-form-item v-else label="链接">
						<dc-url v-model="settingData.data.btn1.url"></dc-url>
					</el-form-item>
					<el-form-item label="小程序">
						<el-switch v-model="settingData.data.btn1.isMp" :active-value="1" :inactive-value="0" />
					</el-form-item>
				</div>
				<div class="title">右1按钮</div>
				<div class="content">
					<el-form-item label="图标">
						<div class="sa-flex">
							<sa-uploader v-model="settingData.data.btn2.src" fileType="image"></sa-uploader>
							<div class="tip">建议尺寸：98*98</div>
						</div>
					</el-form-item>
					<el-form-item label="标题">
						<dc-text-color v-model="settingData.data.btn2.title" placeholder="请输入标题" maxlength="5"
							show-word-limit></dc-text-color>
					</el-form-item>
					<template v-if="settingData.data.btn2.isMp == 1">
						<el-form-item label="小程序路径">
							<el-input v-model="settingData.data.btn2.path" placeholder="请输入小程序路径"></el-input>
						</el-form-item>
						<el-form-item label="小程序appid">
							<el-input v-model="settingData.data.btn2.appid" placeholder="请输入小程序appid"></el-input>
						</el-form-item>
						<el-form-item label="小程序原始ID">
							<el-input v-model="settingData.data.btn2.id" placeholder="请输入小程序原始ID"></el-input>
						</el-form-item>
					</template>
					<el-form-item v-else label="链接">
						<dc-url v-model="settingData.data.btn2.url"></dc-url>
					</el-form-item>
					<el-form-item label="小程序">
						<el-switch v-model="settingData.data.btn2.isMp" :active-value="1" :inactive-value="0" />
					</el-form-item>
				</div>
				<div class="title">右2按钮</div>
				<div class="content">
					<el-form-item label="图标">
						<div class="sa-flex">
							<sa-uploader v-model="settingData.data.btn3.src" fileType="image"></sa-uploader>
							<div class="tip">建议尺寸：98*98</div>
						</div>
					</el-form-item>
					<el-form-item label="标题">
						<dc-text-color v-model="settingData.data.btn3.title" placeholder="请输入标题" maxlength="5"
							show-word-limit></dc-text-color>
					</el-form-item>
					<template v-if="settingData.data.btn3.isMp == 1">
						<el-form-item label="小程序路径">
							<el-input v-model="settingData.data.btn3.path" placeholder="请输入小程序路径"></el-input>
						</el-form-item>
						<el-form-item label="小程序appid">
							<el-input v-model="settingData.data.btn3.appid" placeholder="请输入小程序appid"></el-input>
						</el-form-item>
						<el-form-item label="小程序原始ID">
							<el-input v-model="settingData.data.btn3.id" placeholder="请输入小程序原始ID"></el-input>
						</el-form-item>
					</template>
					<el-form-item v-else label="链接">
						<dc-url v-model="settingData.data.btn3.url"></dc-url>
					</el-form-item>
					<el-form-item label="小程序">
						<el-switch v-model="settingData.data.btn3.isMp" :active-value="1" :inactive-value="0" />
					</el-form-item>
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
import dcUrl from '../../common/dc-url.vue';
import dcTextColor from '../../common/dc-text-color.vue';

const props = defineProps(['settingData', 'tabType']);
</script>
